<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      class="dialog"
    >
       <div>
        <span>订单状态:</span><span>{{ form.status | filterStatus }}</span>
      </div>
      <div>
        <span>用户名:</span><span>{{ form.username }}</span>
      </div>
      <div>
        <span>收货人:</span><span>{{ form.names }}</span>
      </div>
      <div>
        <span>收货人电话:</span><span>{{ form.phone }}</span>
      </div>
      <div>
        <span>收货人地址:</span><span>{{ form.address }}</span>
      </div>
      <div>
        <span>订单编号:</span><span>{{ form.id }}</span>
      </div>
      <div v-if="form.status=='5'">
      <div style="color: red;" >退货退款信息:</div>
      <div class="msg"><span>快递单号:</span><span>{{ forms.passId }}</span></div>
      <div class="msg"><span>快递公司:</span><span>{{ forms.passName}}</span></div>
      <div class="msg"><span>商品名称:</span><span>{{ forms.shopnames }}</span></div>
      <div class="msg"><span>时间:</span><span>{{ forms.times }}</span></div>
      </div>
      <div>
        <el-button type="success" size="small" v-if="form.status==0"  @click="controls(1,form.id)" >发出货物</el-button>
        <el-button type="error" size="small" v-else-if="form.status=='2'" @click="returnMoney(form)" >审核退款</el-button>
        <el-button type="error" size="small" v-else-if="form.status=='5'" @click="returnMoneys(form)" >同意并审核退货退款</el-button>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { changeGoodStatus ,returnMoney,getUserReturn} from '@/api/shop';
export default {
  data() {
    return {
      dialogVisible: false,
      form:{
        address:"",  //地址
        phone:"",     //电话
        id:"",        //订单id
        names:"",      //收货人
        username:"",    //用户
        status:"",      //状态
        total:""        //总价
      },
      forms:{}
    }
  },
  watch:{
   "form.id"(newV){
    if(newV&&this.form.status=='5'){
      this.getUserReturn()
    }
   }
  },
  /* 过滤器 */
  filters:{
     filterStatus(e){
      switch (e){
        case '0':return "已下单";
        case '2':return "已取消"
      }
     }
  },
  methods: {
    handleClose() {
      this.dialogVisible=false
    },
    controls(e,k){
      if(e==1 || e==4||e==6){
       console.log(k,'kkkk')
       let obj={
        id:k,
        btn:e
       }
       changeGoodStatus(obj).then(res=>{
        if(res.code==200){
          this.$message.success("操作成功")
          this.$nextTick(()=>{
            this.dialogVisible=false
            this.$parent.getData()
          })
        }
        else{
          this.$message.success("操作失败")
        }
       })
      }
    },
    returnMoney(e){
      console.log(e,'eell')
      // returnMoney()
      let obj={
        username:this.form.username,
        total:this.form.total
      }
      returnMoney(obj).then(res=>{
        if(res.code==200){
        this.$message.success("退款成功")
        this.$nextTick(()=>{
          this.controls(4,this.form.id)
        })
        }
      })
    },
    returnMoneys(e){
      console.log(e,'eell')
      let obj={
        username:this.form.username,
        total:this.form.total
      }
      returnMoney(obj).then(res=>{
        if(res.code==200){
        this.$message.success("退款成功")
        this.$nextTick(()=>{
          this.controls(6,this.form.id)
        })
        }
      })
    },
    //获取用户退货订单信息
    getUserReturn(){
    let obj={
      id:this.form.id
    }
    getUserReturn(obj).then(res=>{
      if(res.code==200){
        console.log(res,'resp')
        this.forms={...this.forms,...res.data}
      }
    })
    }
  },

};
</script>

<style lang="scss" scoped>
.el-dialog__body>div{
  margin-bottom: 1vw;
}
.dialog span{
 
}
.msg{
  margin: 1vw 0 0;
  &>span:first-child{
    color: red;
  }
}
</style>